<!DOCTYPE html>
<meta charset="utf-8">

<html>
    <head>
        <script type="module" src="index.js"></script>
        <title>Yan Web Client</title>
        <style>
            .outer{
                margin-left: 50px;
                margin-right: 50px;
                height: 150px;
                align-items: center;
                text-align:center;
                justify-content: center;
                white-space: pre-line;
                gap: 60px 30px;
            }
            .input_align {
                width: 100px;
                text-align: right;
                display: inline-block;
            }
            .button_align {
                width: 100px;
                text-align: center;
                display: inline-block;
                align-self: flex-start;
            }
            .word {
                margin-left: 20px;
            }
            .word_selected {
                margin-left: 20px;
                color:aqua;
            }

        </style>        
    <body>
        <div id="arguments" class="outer">
            <label class="input_align">API 目标: </label><input type="text" name="api_input" id="api_input">
            <label class="input_align">古文内容: </label><input type="text" name="text_input" id="text_input">
            <button class = "button_align" id="trans_button" name="trans_button">翻译</button>
        </div>
        <div id="result" class="outer">

        </div>
    </body>
</html>

